<template>
  <Panel title="客货分析" class="flow-car" v-bind="props.config">
    <div @click.stop="click" class="flow-car-wrapper">
      <carAnalysis
        :pieChartData="pieChartData"
        type="analysis"
        :guestCarList="guestCarList"
        :vanCarList="vanCarList"
        v-if="roadType == 1"
      >
      </carAnalysis>

      <GuestVansAnalysis
        :pieChartData="pieChartData"
        :guestAccounted="guestAccounted"
        :vansAccounted="vansAccounted"
        :colorList="colorList"
        :titleShow="titleShow"
        :bottomShow="bottomShow"
        titleText=""
        v-else
      >
      </GuestVansAnalysis>
    </div>
  </Panel>
</template>

<script>
export default {
  name: 'FlowCar'
}
</script>
<script setup>
/**
 * @desc 客货分析(二级)
 * @auther 阳坤
 * @date 2022/10/21
 *
 **/
import Panel from '../../components/panel'
import flowApi from '../../api/flow.js'
import { ref, defineProps, defineEmits, computed } from 'vue'
import useWatchStore from '@/hooks/useWatchStore'
import store from '@/store'
import GuestVansAnalysis from '../../components/detail/GuestVansAnalysis.vue'
import carAnalysis from '../../components/car-analysis/index.vue'

const props = defineProps({
  // 详情配置
  config: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

// emit回调方法
const emit = defineEmits(['setDetail'])
const isProvince = computed(() => store.state.config.isProvince)
const roadType = computed(() => store.state.config.roadType)

// 客车列表
const guestCarList = ref([])
// 货车列表
const vanCarList = ref([])

// 客货分析- 客车占比、货车占比以及饼图数据
const guestAccounted = ref()
const vansAccounted = ref()
const pieChartData = ref([])
const colorList = ref(['#19bbce', '#266BF4'])
// 控制客货分析- legend是否显示
const titleShow = ref(false)
const bottomShow = ref(false)

/**
 * 获取数据
 */
const getData = (argParams, action) => {
  console.log(roadType.value)
  titleShow.value = true
  bottomShow.value = false
  const params = {
    roadType: argParams.roadType,
    province: '32',
    city: isProvince.value ? '' : argParams.areaCode
  }
  flowApi.getCarAnalysis(params).then(res => {
    if (res.data) {
      if (roadType.value == 1) {
        pieChartData.value = [
          { name: '货车', value: res.data.hcCount || 0 },
          { name: '客车', value: res.data.kcCount || 0 }
        ]
      } else {
        // 客货分析- 客车、货车值
        guestAccounted.value = ((res.data.kcCount / (res.data.kcCount + res.data.hcCount)) * 100).toFixed(1)
        vansAccounted.value = ((res.data.hcCount / (res.data.kcCount + res.data.hcCount)) * 100).toFixed(1)
        if (!guestAccounted.value || guestAccounted.value == 'NaN') guestAccounted.value = 0
        if (!vansAccounted.value || vansAccounted.value == 'NaN') vansAccounted.value = 0
        pieChartData.value = [
          { name: '货车', value: res.data.hcCount || 0 },
          { name: '客车', value: res.data.kcCount || 0 }
        ]
      }
    }
  })
}

const click = () => {
  emit('setDetail', {
    type: 'flow-car',
    actions: 'click',
    data: {},
    config: props.config.detailConfig
  })
}
/**
 *  初始化以及监听地市编码跟路网类型
 */
useWatchStore(getData)
</script>

<style scoped lang="less">
.flow-car-wrapper {
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.flow-car {
  /deep/.mz-panel-content-main {
    padding: 0;

    .title {
      display: none;
    }
    .flow-car-analysis {
      width: 100%;

      .flow-car {
        padding: 0 40px;
        .center {
          width: 160px;
          height: 160px;
        }
        .left-accounted,
        .right-accounted {
          font-size: 18px;
          .accounted {
            line-height: 20px;
            font-weight: 700;

            .number {
              font-size: 34px;
            }
          }
        }
      }
    }
  }
}
</style>
